<template>
  <div class="app-container">
    <div class="filter-container" ><!--直接width="100px"不行，需要在style里面改。但是表格的宽度是直接上属性的-->

      <el-select style="width: 20%;" placeholder="所有类型" v-model="typeChoose" clearable class="filter-input filter-item">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-select style="width: 20%; margin: auto" placeholder="所有状态" v-model="statusChoose" clearable class="filter-input filter-item">
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-date-picker
        v-model="value1"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="timestamp"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <!--       <div style="float: left"> -->
      <!--        <el-date-picker-->
      <!--          v-model="value1"-->
      <!--          type="daterange"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始日期"-->
      <!--          end-placeholder="结束日期">-->
      <!--        </el-date-picker>-->
      <!--       </div>-->
      <el-button @click="seeTime">查询</el-button>
    </div>
    <el-table border style="width: 100%" :data="list" >
      <el-table-column prop="messageContent" label="消息内容"></el-table-column>
      <el-table-column prop="messageType" label="消息类型"></el-table-column>
      <el-table-column prop="sendFrom" label="发送方"></el-table-column>
      <el-table-column prop="sendTime" label="发送时间"></el-table-column>
      <el-table-column prop="status" label="操作状态"></el-table-column>
      <el-table-column label="操作" style="text-align:center;width: 100%" label-width="90px" >
        <!--操作和slot-scope 要学会使用,这里是解构赋值了。给子组件使用，底下的row就相当于$scope.   -->
        <template slot-scope="{row,$index}">

          <el-button type="text" @click="handleCheck(row,$index)" >
            <i class="el-icon-edit-outline" />查看
          </el-button>

        </template>

      </el-table-column>
    </el-table>

    <!--    自己绑定了@pagination="getTableList"，切换每页最大条数时，每页的条数就会改变，如果没有绑定该事件，那么就不会切换！  -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getTableList"></pagination>
    <!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->



  </div>
</template>

<script>
  import pagination from '@/components/Mypagination/index'
  export default {
    name: 'index',
    components:{
      pagination
    },
    data() {
      return{
        value1:'',
        typeChoose:'',
        statusChoose:'',
        bejing:'123',
        shanghai:'321',
        temp:{},
        options1: [{
          value: '院级教室申请',
          label: '院级教室申请'
        }, {
          value: '校级教室申请',
          label: '校级教室申请'
        },],
        options2: [{
          value: '已查看',
          label: '已查看'
        }, {
          value: '未查看',
          label: '未查看'
        },],
        list:[{
          messageContent: '[tjh]申请维修抽油设备',
          messageType:'设备维修申请',
          sendFrom: '采油部tjh',
          sendTime:'2021.6.14',
          status: '已查看',
        },
          {
            messageContent: '[tjh]申请维修抽油设备',
            messageType:'设备维修申请',
            sendFrom: '采油部tjh',
            sendTime:'2021.6.15',
            status: '未查看',
          },
        ],
        total:2,
        listQuery:{
          page: 1,
          limit: 10,
          id: undefined,
          name: undefined,
          type: undefined,
          status: '+id'
        }
      }
    },
    created() {

    },
    methods: {
      seeTime(){
        // console.log(this)
        console.log(this.value1)
      },
      getTableList(){

      },
      handleReset(){

      },
      handleWarning(response){
        this.$message({
          message:  response.message || response ,
          type: "warning",
          duration: 2000
        })
      },
      handleFilter(){

      },
      handleCheck(){
        this.$router.push({
          path:'/deviceFix/fixForm/submit'
        })
      }
    }
  }
</script>

<style scoped>

</style>
